<template>
  <div id="app" class="dark-mode-bg">
    <Transition name="fade-in-out">
      <section v-if="currentPage === 'intro'" class="intro-page">
        <div class="intro-content">
          <img src="/Logo-Spark.png" alt="Spark Team Logo" class="intro-logo" />
          <h2 class="intro-title">星火团队：因你闪耀，为你喝彩</h2>
          <div :class="['scroll-prompt', { 'fade-in': showScrollPrompt }]">
            向下滚动 ↓
          </div>
        </div>
      </section>
    </Transition>

    <div class="main-container">
      <header class="main-header">
        <div class="header-content">
          <h1>贡献者荣誉墙</h1>
        </div>
      </header>

      <main class="main-content" :class="{ 'show': currentPage === 'main' }">
        <div v-if="!projects" class="loading-message">
          加载中，请稍候...
        </div>
        <div v-else class="project-list">
          <section v-for="project in projects"
                   :key="project.name"
                   @click="selectProject(project.name)"
                   class="project-card">
            <div class="card-content">
              <h2 class="project-name">{{ project.name }}</h2>
              <p>点击查看贡献者详情</p>
            </div>
          </section>
        </div>
      </main>
    </div>

    <Transition name="fade-in-zoom">
      <div v-if="selectedProjectName" class="project-detail-overlay">
        <section class="project-detail-section">
          <button @click="closeProjectDetail" class="back-button">← 返回项目列表</button>
          
          <h2 class="project-title">{{ selectedProjectName }}</h2>
          <div class="content-wrapper">
            <ContributorList title="核心贡献者" :contributors="projects.find(p => p.name === selectedProjectName).info.core" />
            <ContributorList title="历史贡献者" :contributors="projects.find(p => p.name === selectedProjectName).info.legacy" />
          </div>
        </section>
      </div>
    </Transition>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import ContributorList from './components/ContributorList.vue'

// 控制滚动提示
const showScrollPrompt = ref(false)
// 当前选择的项目名
const selectedProjectName = ref(null)
// 当前显示页面
const currentPage = ref('intro')
// 项目数据
const projects = ref(null)

// 拉取项目数据并清理头像 URL
const fetchProjects = async () => {
  // 根据环境自动切换 API 地址
  const apiUrl = import.meta.env.MODE === 'development'
    ? 'http://127.0.0.1:5450/api/projects'
    : '/api/projects'
  try {
    const response = await fetch(apiUrl)
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }
    const data = await response.json()
    // 修改分类逻辑：只分核心和历史贡献者
    Object.keys(data).forEach(projectName => {
      // 合并所有贡献者
      let allContributors = []
      ;['core', 'active', 'legacy'].forEach(group => {
        if (Array.isArray(data[projectName][group])) {
          allContributors = allContributors.concat(data[projectName][group])
        }
      })
      // 清理头像 URL
      allContributors = allContributors.map(contributor => {
        if (contributor.avatarUrl) {
          contributor.avatarUrl = contributor.avatarUrl.replace('!avatar30', '')
        } else {
          contributor.avatarUrl = null
        }
        return contributor
      })
      // 按 commit 数降序排序
      allContributors.sort((a, b) => (b.commits || 0) - (a.commits || 0))
      // 前 30% 为核心贡献者
      const coreCount = Math.ceil(allContributors.length * 0.3)
      data[projectName].core = allContributors.slice(0, coreCount)
      data[projectName].legacy = allContributors.slice(coreCount)
      // 移除活跃贡献者分组
      delete data[projectName].active
    })
    // 置顶项目列表
    const topProjectNames = [
      '星火应用商店 Spark-Store',
      '星火应用管理器',
      '星火软件更新器',
      'appimage2deb'
    ]
    // 生成排序后的项目数组
    const allProjects = Object.entries(data)
      .map(([name, info]) => ({ name, info }))
    // 先筛选置顶项目
    const topProjects = topProjectNames
      .map(topName => allProjects.find(p => p.name === topName))
      .filter(Boolean)
    // 剩余项目按核心贡献者人数降序
    const otherProjects = allProjects
      .filter(p => !topProjectNames.includes(p.name))
      .sort((a, b) => (b.info.core.length || 0) - (a.info.core.length || 0))
    // 合并置顶和排序后的项目
    projects.value = [...topProjects, ...otherProjects]
    console.log("项目数据已成功加载:", projects.value)
  } catch (error) {
    console.error("加载项目数据失败:", error)
    projects.value = []
  }
}

// 页面滚动逻辑
const handleScroll = () => {
  const scrollY = window.scrollY
  const vh = window.innerHeight
  if (currentPage.value === 'intro' && scrollY > vh * 0.5) {
    currentPage.value = 'main'
    window.scrollTo({ top: vh, behavior: 'smooth' })
  } else if (currentPage.value === 'main' && scrollY < vh * 0.25) {
    currentPage.value = 'intro'
    window.scrollTo({ top: 0, behavior: 'smooth' })
  }
}

const selectProject = (projectName) => {
  selectedProjectName.value = projectName
}

const closeProjectDetail = () => {
  selectedProjectName.value = null
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
  setTimeout(() => {
    showScrollPrompt.value = true
  }, 3000)
  fetchProjects()
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style>


/* CSS Styles remain the same as the original, with one addition for the loading state */

/* Ensure body has no default margin to prevent scrollbars */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Styles for the main application container */
#app.dark-mode-bg {
  background-color: #000; /* Pure black background for a premium feel */
  color: #eee; /* Light text color */
  position: relative;
}

/* Pseudo-element to create a full-page frosted glass background effect */
#app.dark-mode-bg::before {
  content: '';
  position: fixed; /* Fixed in the viewport, not moving with scroll */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.05); /* Semi-transparent white background */
  backdrop-filter: blur(20px); /* The key frosted glass effect */
  z-index: 0; /* Place behind all other content */
}

/* Styles for the intro page, occupying the entire viewport and fixed at the top */
.intro-page {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  position: fixed; /* Fixed so it stays in place */
  top: 0;
  left: 0;
  z-index: 2; /* Ensure it's above the main content */
}

/* Intro page content container */
.intro-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

/* Intro page Logo */
.intro-logo {
  width: 150px;
  height: auto;
  animation: logoPulse 2s infinite ease-in-out;
}

@keyframes logoPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Intro page title */
.intro-title {
  color: #fff;
  font-size: 2.5rem;
  font-weight: 300;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  animation: glow 2s ease-in-out infinite; /* Apply the glow animation */
}

/* CSS animation for the glowing effect */
@keyframes glow {
  0%, 100% {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6, 0 0 25px #0073e6, 0 0 30px #0073e6, 0 0 35px #0073e6;
  }
  50% {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #00c9e6, 0 0 40px #00c9e6, 0 0 50px #00c9e6, 0 0 60px #00c9e6, 0 0 70px #00c9e6;
  }
}

/* Styles for the scroll prompt */
.scroll-prompt {
  margin-top: 40px;
  font-size: 1.2rem;
  color: #aaa;
  opacity: 0; /* Initial opacity is 0 */
  transition: opacity 0.5s ease-in-out; /* Add fade-in transition */
  animation: bounce 2s infinite;
}

/* Control fade-in effect */
.scroll-prompt.fade-in {
  opacity: 1;
}

/* Bounce animation */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* Main content container */
.main-container {
  min-height: 200vh; /* This needs to be large enough to allow scrolling */
  background-color: #000;
  position: relative;
  top: 100vh; /* Place it below the intro page */
  z-index: 1; /* Ensure it's above the intro page background but below the intro content */
}

/* Styles for the main header */
.main-header {
  text-align: center;
  padding: 20px;
  position: sticky; /* Key change: makes it stay fixed on scroll */
  top: 0; /* Key change: fix to the top */
  z-index: 10; /* Ensure the header is above all background effects */
  /* Remove header background to make it transparent */
  transition: background-color 0.3s ease;
  background: rgba(30, 30, 30, 0.5); /* 毛玻璃背景色 */
  backdrop-filter: blur(12px);        /* 毛玻璃模糊效果 */
}

/* Header content container */
.header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Styles for the main content area */
.main-content {
  max-width: 1200px; /* Limit max-width to keep content centered */
  margin: auto;
  padding: 20px;
  position: relative;
  z-index: 2; /* Ensure content is above all background effects */
}

/* -------------------------------------- */
/* New styles for project cards and expanded view */
/* -------------------------------------- */

/* Project list grid layout */
.project-list {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Project card styles */
.project-card {
  background-color: rgba(255, 255, 255, 0.03);
  border-radius: 15px;
  padding: 30px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.project-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Project card inner content */
.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.project-name {
  font-size: 1.8rem;
  color: #fff;
  margin-bottom: 10px;
  border-bottom: 2px solid #555;
  padding-bottom: 5px;
}

.project-card p {
  color: #aaa;
  font-style: italic;
  font-size: 0.9rem;
}

/* Overlay for the project details, fixed to the viewport */
.project-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Ensure it's on top of everything else */
}

/* Expanded project detail section styles, inside the overlay */
.project-detail-section {
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 1000px;
  max-height: 90vh;
  /* Removed overflow-y: auto to prevent scrollbar on the main overlay section */
}

/* 新增的样式：内容包装器，用于隐藏滚动条 */
.content-wrapper {
  max-height: calc(90vh - 200px); /* 动态计算最大高度，减去标题和按钮的高度 */
  overflow-y: scroll; /* 确保内容可以滚动 */
  -ms-overflow-style: none; /* For Internet Explorer and Edge */
  scrollbar-width: none; /* For Firefox */
}

/* For Chrome, Safari, and Opera */
.content-wrapper::-webkit-scrollbar {
  display: none;
}

.project-detail-section .project-title {
  font-size: 2.5rem;
  font-weight: 500;
  color: #fff;
  border-bottom: 2px solid #555;
  padding-bottom: 15px;
  margin-bottom: 30px;
  text-align: left;
}

/* Back button styles */
.back-button {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 20px;
}

.back-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Transition animation styles */
.fade-in-zoom-enter-active,
.fade-in-zoom-leave-active {
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.fade-in-zoom-enter-from,
.fade-in-zoom-leave-to {
  opacity: 0;
  transform: scale(0.8);
}

/* New transition for intro page */
.fade-in-out-enter-active,
.fade-in-out-leave-active {
  transition: opacity 0.5s ease-out;
}
.fade-in-out-enter-from,
.fade-in-out-leave-to {
  opacity: 0;
}

/* 新增：加载中的消息样式 */
.loading-message {
    text-align: center;
    font-size: 1.5rem;
    color: #888;
    margin-top: 50px;
}

</style>
